<template>
  <div>
    <comment-header></comment-header>
    <div id="title">
      <h1>{{title.name}}</h1>
      <div>{{title.intro}}</div>
      <main>
        <span class="left">JOIN</span>
        <span class="right">
          <img src="http://assets.petshow.cc/wap/v2/img/noneico.png" alt>
        </span>
      </main>
    </div>
    <div id="box">
      <div v-for="(item,index) in contentList" :key="index" class="box">
        <img
          :src="item.picture"
          alt
          :style="{width:46 + 'vw',height:item.picture_height / 5 + 'px'}"
        >
      </div>
    </div>
  </div>
</template>

<script>
import commentHeader from "../../components/comment/commentHeader";
export default {
  components: {
    commentHeader
  },
  data() {
    return {
      contentList: "",
      title: "",
      page: 1,
      loadingMore: false
    };
  },
  created() {
    this.title = JSON.parse(window.localStorage.getItem("pet_item"));
    console.log(this.title);
  },
  mounted() {
    this.subItemContent();
    window.onscroll = this.didScorll;
  },
  methods: {
    subItemContent() {
      var that = this;
      this.$http
        .get(
          "/pet/v2/pickalbumlist?pick_id=" +
            this.$route.query.subid +
            "&page=" +
            this.page
        )
        .then(function(data) {
          that.contentList = data.body.data.list;
        });
    },
    didScorll() {
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop1;
      var contentHeight = document.body.clientHeight;
      var windowHeight = window.innerHeight;
      if (scrollTop + windowHeight > contentHeight - 50) {
        if (this.loadingMore == false) {
          this.loadMore();
        }
      }
    },
    loadMore() {
      this.loadingMore = true;
      this.page += 1;
      var that = this;
      var url =
        "/pet/v2/pickalbumlist?pick_id=" +
        this.$route.query.subid +
        "&page=" +
        this.page;
      this.$http.get(url).then(function(data) {
        that.contentList = that.contentList.concat(data.body.data.list);
        that.loadingMore = false;
      });
    }
  }
};
</script>

<style scoped>
#box {
   box-sizing: border-box;
   margin-top: 5vw;
  padding-bottom: 10vw; 
  column-count: 2;
  padding: 0 4vw;
}
/* .box { */
 
  /* padding: 0 2vw; */
  /* 　break-inside: avoid; */
  /* width: 46vw; */
  /* margin: 1vw; */
/* } */
img {
  /* display: flex;
  　flex-direction: column;
  　justify-content: center;
  　align-items: center;
  　height: auto; */

  border-radius: 5px;
}
#title {
  background-color: white;
}
h1 {
  margin: 0;
  padding: 0;
  font-weight: 200;
  padding: 3vw;
}
#title > div {
  width: 94vw;
  margin: 3vw auto;
  font-weight: 100;
  opacity: 0.8;
  padding: 3vw 0 3vw 0;
  border-bottom: 1px solid black;
}
main {
  display: flex;
  justify-content: space-between;
  padding: 3vw;
  align-items: center;
}
.left {
  font-weight: bolder;
  opacity: 0.5;
}
.right > img {
  width: 10vw;
  height: 10vw;
  display: inline-block;
}
</style>
